<template>
  <el-form  id="el-form-curr" label-width="120px">
    <el-form-item
        class="animate__animated animate__fadeInDown"
        label="出发地">
<!--      <el-input-->
<!--          ref="leaveCityInput"-->
<!--          v-model="train.leaveCity"-->
<!--          class="el-input-curr w-50 m-2"-->
<!--          placeholder="城市名"-->
<!--      />-->
      <el-autocomplete
          v-model="train.leaveCity"
          :fetch-suggestions="querySearch"
          placeholder="城市名"
          @select="handleSelect"
      />
    </el-form-item>
<!--    交换城市-->
    <el-button
        class="animate__animated animate__fadeIn"
        circle
        :icon="Switch"
        @click="swap"></el-button>

    <el-form-item
        class="animate__animated animate__fadeInUp"
        label="目的地">
<!--      <el-input-->
<!--          ref="leaveCityInput"-->
<!--          v-model="train.arriveCity"-->
<!--          class="el-input-curr w-50 m-2"-->
<!--          placeholder="城市名"-->
<!--      />-->
      <el-autocomplete
          v-model="train.arriveCity"
          :fetch-suggestions="querySearch"
          placeholder="城市名"
          @select="handleSelect"
      />
    </el-form-item>

    <el-form-item label="出发时间" class="animate__animated animate__fadeInUp">
      <el-date-picker style="width: 200px"
          v-model="train.leaveTime"
          type="date"
          placeholder="选择日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
      />
    </el-form-item>
      <el-button
          class="animate__animated animate__fadeInRight"
          @click="homeToTrainSearch"
          id="searchButton"
          size="default"
          color="#FF6257">
        搜索
      </el-button>
  </el-form>
</template>

<script>
import {Switch} from "@element-plus/icons-vue";
import {onMounted, reactive} from 'vue'
import {ElMessage} from "element-plus";
import router from "../../router"
import store from "../../store";
export default {
  name: "TrainInfo",
  data(){
    return {
     trainHintInfo:[],
    }
  },
  methods:{
    querySearch(queryString, cb) {
      let trainHintInfo = this.trainHintInfo;
      let results = queryString ? trainHintInfo.filter(this.createFilter(queryString)) : trainHintInfo;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "北京" },
        { "value": "上海" },
        { "value": "广州" },
        { "value": "深圳" },
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
  },
  mounted() {
    this.trainHintInfo = this.loadAll()
  },
  setup() {
    // 火车票信息格式
    let data = store.state.trainSearchInfo

    const train = reactive({
      leaveCity: '',
      arriveCity: '',
      leaveTime: '',
    })
    const swap = () => {
        if (train.arriveCity === '' && train.leaveCity === '') {
          ElMessage({
            message: '请输入城市名',
            type: 'warning',
          })
        } else {
          let temp = train.arriveCity
          train.arriveCity = train.leaveCity
          train.leaveCity = temp
        }
    }
    const homeToTrainSearch = () => {
      data.startPlace = train.leaveCity
      data.endPlace = train.arriveCity
      data.date = train.leaveTime
      store.commit("trainSearch", data)
      store.commit('navigationChange', 'train')
    }

    return {
      train,
      Switch,
      swap,
      homeToTrainSearch,
    }

  }
}
</script>

<style scoped>
#el-form-curr {
  width: 428px ;
  height: 100%;
  margin-right: 0;
  padding-top: 50px;
  background-color: #cfeae6
}
#el-form-curr .el-input-curr {
  width: 200px;
}
#searchButton {
  color: white;
  position: relative;
  right: -60px;
  width: 100px;
  text-align: center;
}
.animate__fadeIn {
  --animate-duration: 3s;
}

</style>